<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09让图表动起来</title>
    <script src="./node_modules/d3/dist/d3.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>

<script>
    /*
    * 初始化数据
    * */
    const dataset = [10, 20, 30, 10, 40, 20, 50, 90, 10, 30];
    const padding = {top: 20, right: 20, bottom: 20, left: 30};
    const width = 1000;
    const height = 500;
    /*
    * 创建svg
    * */
    const body = d3.select('body');
    body.append('svg')
        .attr('width', width)
        .attr('height', height);
    const svg = body.select('svg');
    svg.style('background-color', 'rgba(0,0,0,.2)');
    /*
    * 设置比例尺
    * */
    // x 轴序数比例尺
    const xScale = d3.scaleBand() // 创建一个序数分段比例尺.
        .domain(d3.range(dataset.length)) // 设置输入范围.
        .rangeRound([0, width - padding.left - padding.right]); // 设置输出范围并启用四舍五入.
    // y 轴线性比例尺
    const yScale = d3.scaleLinear() // 创建一个定量的线性比例尺.
        .domain([0, d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);

    /*
    * 创建轴
    * */
    // x 轴
    const xAxis = d3.axisBottom() //  创建一个新的刻度在下的坐标轴生成器
        .scale(xScale); // 设置坐标轴的比例尺
    svg.append('g')
        .attr('transform', `translate(${padding.left},${height - padding.top})`)
        .call(xAxis);

    // y 轴
    const yAxis = d3.axisLeft()
        .scale(yScale);
    svg.append('g')
        .attr('transform', `translate(${padding.left},${padding.top})`)
        .call(yAxis)

    /*
    * 绘制柱状图
    * */
    const rectPadding = 10;
    svg.selectAll('rect')
        .data(dataset)
        .enter()
        .append('rect')
        .on('click', function () {
            console.log(1);
        })
        .attr('transform', `translate(${padding.left},${padding.top})`)
        .attr('x', (data, i) => {
            return xScale(i) + rectPadding / 2
        })
        .attr('width', (data, i) => {
            return xScale.bandwidth() - rectPadding
        })
        .attr('fill', 'red')
        .attr('height', 0)
        .attr('y', (data, i) => {
            const min = yScale.domain()[0];
            console.log('yScale(min)', yScale(min));
            return yScale(min);
            // return yScale(data)
        })
        .transition()
        .duration(2000)
        .delay((data, i) => {
            return i * 200
        })
        .ease(d3.easeBounce)
        .attr('y', (data) => {
            return yScale(data)
        })
        .attr('height', (data, i) => {
            return height - padding.top - padding.bottom - yScale(data)
        });

    svg.selectAll('.text')
        .data(dataset)
        .enter()
        .append('text')
        .attr('transform', `translate(${padding.left},${padding.top})`)
        .attr('class', '.text')
        .attr('y', (data) => {
            return height - padding.top - padding.bottom
        })
        .attr('x', (data, i) => {
            return xScale(i) + xScale.bandwidth() / 2
        })
        .attr('opacity', 0)
        .attr('text-anchor', 'middle')
        .text((data) => {
            return data
        })
        .style('fill', '#fff')
        .transition()
        .duration(2000)
        .delay((data, i) => {
            return i * 200
        })
        .ease(d3.easeBounce)
        .attr('y', (data) => {
            return yScale(data) + 25
        })
        .attr('opacity', 1)
</script>
